<!DOCTYPE html>
<html lang="en">

<head>
  @@include('./meta.html',{})
</head>

<body class="app-component">
  @@include('./header.html',{
  "collections": "active"
  })
  <div class="component-wrapper">
    <div class="component-navleft">
      @@include('./navleft.html',{
      "tab_layout": "active"
      })
    </div><!-- component-navleft -->

    <div class="component-sidebar">
      @@include('./sidebar.html',{
      "tab_layout": "active",
      "modals": "active",
      "urlPrefix": "../components"
      })
    </div><!-- component-sidebar -->

    <div class="component-content">
      <div class="component-content-header">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb breadcrumb-style1 mg-b-0">
            <li class="breadcrumb-item"><a href="#">Components</a></li>
            <li class="breadcrumb-item active" aria-current="page">Modals</li>
          </ol>
        </nav>
        <a href="javascript:;" id="componentOptions" class="text-secondary mg-l-auto d-xl-none"><i data-feather="more-horizontal"></i></a>
      </div><!-- component-content-header -->

      <div class="component-content-body" data-spy="scroll" data-target="#navSection" data-offset="120">
        <div class="content content-components">
          <div class="container">
            <!--sd-->
            <h1 class="td-title mg-b-5-f">Modals</h1>
            <p class="td-lead">Create a modal box quickly by using any of the starter modal layouts available below.</p>

            <div class="row">
              <div class="col-sm-6 col-xl-4">
                <a href="#modalSplitColumn" data-toggle="modal" class="outline-none">
                  <div class="bg-gray-700 ht-200 d-flex align-items-center justify-content-center mg-b-15">
                    <img src="../assets/img/modal-split.png" class="wd-50p" alt="">
                  </div>
                </a>
                <h6>Split Column Modal</h6>
              </div><!-- col -->
              <div class="col-sm-6 col-xl-4 mg-t-20 mg-sm-t-0">
                <a href="#modalTabbed" data-toggle="modal" class="outline-none">
                  <div class="bg-gray-700 ht-200 d-flex align-items-center justify-content-center mg-b-15">
                    <img src="../assets/img/modal-tabbed.png" class="wd-45p" alt="">
                  </div>
                </a>
                <h6>Tabbed Modal</h6>
              </div><!-- col -->
              <div class="col-sm-6 col-xl-4 mg-t-20 mg-xl-t-0">
                <a href="#modalUsers" data-toggle="modal" class="outline-none">
                  <div class="bg-gray-700 ht-200 d-flex align-items-center justify-content-center mg-b-15">
                    <img src="../assets/img/modal-users.png" class="wd-40p" alt="">
                  </div>
                </a>
                <h6>User List Modal</h6>
              </div><!-- col -->
              <div class="col-sm-6 col-xl-4 mg-t-20">
                <a href="#modalBillingInfo" data-toggle="modal" class="outline-none">
                  <div class="bg-gray-700 ht-200 d-flex align-items-center justify-content-center mg-b-15">
                    <img src="../assets/img/modal-billing.png" class="wd-40p" alt="">
                  </div>
                </a>
                <h6>Billing Info Modal</h6>
              </div><!-- col -->
              <div class="col-sm-6 col-xl-4 mg-t-20">
                <a href="#modalSignIn" data-toggle="modal" class="outline-none">
                  <div class="bg-gray-700 ht-200 d-flex align-items-center justify-content-center mg-b-15">
                    <img src="../assets/img/modal-signin.png" class="wd-40p" alt="">
                  </div>
                </a>
                <h6>Sign In Modal</h6>
              </div><!-- col -->
              <div class="col-sm-6 col-xl-4 mg-t-20">
                <a href="#modalSignUp" data-toggle="modal" class="outline-none">
                  <div class="bg-gray-700 ht-200 d-flex align-items-center justify-content-center mg-b-15">
                    <img src="../assets/img/modal-signup.png" class="wd-40p" alt="">
                  </div>
                </a>
                <h6>Sign Up Modal</h6>
              </div><!-- col -->
            </div><!-- row -->
            @@include('./footer.html',{})
            <!-- content-footer -->
          </div>
        </div>
      </div><!-- component-content-body -->

      <div class="component-content-sidebar section-nav">
        <label class="tx-10 tx-medium tx-spacing-1 tx-color-03 tx-uppercase tx-sans mg-b-15">On This Page</label>
        <nav id="navSection" class="nav flex-column tx-12">

        </nav>
      </div><!-- component-content-sidebar -->
    </div><!-- component-content -->

  </div><!-- component-wrapper -->

  <div class="modal fade" id="modalSplitColumn" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered mx-wd-sm-650" role="document">
      <div class="modal-content bd-0 bg-transparent">
        <div class="modal-body pd-0">
          <a href="" role="button" class="close pos-absolute t-15 r-15 z-index-10" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </a>

          <div class="row no-gutters">
            <div class="col-3 col-sm-5 col-md-6 col-lg-5 bg-primary rounded-left">
              <div class="wd-100p ht-100p">
                <img src="https://via.placeholder.com/286x429" class="wd-100p img-fit-cover img-object-top rounded-left" alt="">
              </div>
            </div><!-- col -->
            <div class="col-9 col-sm-7 col-md-6 col-lg-7 bg-white rounded-right">
              <div class="ht-100p d-flex flex-column justify-content-center pd-20 pd-sm-30 pd-md-40">
                <span class="tx-color-04"><i data-feather="bar-chart-2" class="wd-40 ht-40 stroke-wd-3 mg-b-20"></i></span>
                <h3 class="tx-16 tx-sm-20 tx-md-24 mg-b-15 mg-md-b-20">First Visit Metrics</h3>
                <p class="tx-14 tx-md-16 tx-color-02">Tracks how users are finding your website, such as organic search or social media, and how engaged they are with your website.</p>
                <p class="tx-12 tx-md-13 tx-color-03 mg-b-25">Ei quo quas vocent. Vel libris luptatum ut, ex mel graeci comprehensam, ut doming antiopam tincidunt sed. Quis efficiantur vix eu, ne eum quas antiopam, ex fugit atqui mel...</p>
                <a href="" class="btn btn-primary btn-block btn-uppercase">Learn More</a>
              </div>
            </div><!-- col -->
          </div><!-- row -->
        </div><!-- modal-body -->
      </div><!-- modal-content -->
    </div><!-- modal-dialog -->
  </div><!-- modal -->

  <div class="modal fade" id="modalTabbed" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-body pd-x-25 pd-sm-x-30 pd-t-40 pd-sm-t-20 pd-b-15 pd-sm-b-20">
          <a href="" role="button" class="close pos-absolute t-15 r-15" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </a>

          <div class="nav-wrapper mg-b-20 tx-13">
            <div>
              <nav class="nav nav-line tx-medium">
                <a href="#performance" class="nav-link active" data-toggle="tab">Performance Score</a>
                <a href="#rating" class="nav-link" data-toggle="tab">Rating</a>
                <a href="#activities" class="nav-link" data-toggle="tab">Activities</a>
              </nav>
            </div>
          </div><!-- nav-wrapper -->

          <div class="tab-content">
            <div id="performance" class="tab-pane fade active show">
              <div class="d-flex align-items-baseline tx-rubik">
                <h1 class="tx-40 lh-1 tx-normal tx-spacing--2 mg-b-5 mg-r-5">9.8</h1>
                <p class="tx-11 tx-color-03 mg-b-0"><span class="tx-medium tx-success">1.6% <i class="icon ion-md-arrow-up"></i></span></p>
              </div>
              <h6 class="tx-uppercase tx-spacing-1 tx-semibold tx-10 tx-color-02 mg-b-15">Performance Score</h6>
              <div class="progress bg-transparent op-7 ht-10 mg-b-20">
                <div class="progress-bar bg-primary wd-50p" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                <div class="progress-bar bg-success wd-25p bd-l bd-white" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
                <div class="progress-bar bg-warning wd-5p bd-l bd-white" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100"></div>
                <div class="progress-bar bg-pink wd-5p bd-l bd-white" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100"></div>
                <div class="progress-bar bg-teal wd-10p bd-l bd-white" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                <div class="progress-bar bg-purple wd-5p bd-l bd-white" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <table class="table table-sm tx-13 mg-b-0">
                <tbody>
                  <tr>
                    <td class="align-middle pd-l-0-f"><div class="wd-15 ht-15 rounded-circle bd bd-3 bd-primary"></div></td>
                    <td class="tx-medium">Excellent</td>
                    <td class="text-right">3,007</td>
                    <td class="text-right pd-r-0-f">50%</td>
                  </tr>
                  <tr>
                    <td class="align-middle pd-l-0-f"><div class="wd-15 ht-15 rounded-circle bd bd-3 bd-success"></div></td>
                    <td class="tx-medium">Very Good</td>
                    <td class="text-right">1,674</td>
                    <td class="text-right pd-r-0-f">25%</td>
                  </tr>
                  <tr>
                    <td class="align-middle pd-l-0-f"><div class="wd-15 ht-15 rounded-circle bd bd-3 bd-warning"></div></td>
                    <td class="tx-medium">Good</td>
                    <td class="text-right">125</td>
                    <td class="text-right pd-r-0-f">6%</td>
                  </tr>
                  <tr>
                    <td class="align-middle pd-l-0-f"><div class="wd-15 ht-15 rounded-circle bd bd-3 bd-pink"></div></td>
                    <td class="tx-medium">Fair</td>
                    <td class="text-right">98</td>
                    <td class="text-right pd-r-0-f">5%</td>
                  </tr>
                  <tr>
                    <td class="align-middle pd-l-0-f"><div class="wd-15 ht-15 rounded-circle bd bd-3 bd-teal"></div></td>
                    <td class="tx-medium">Poor</td>
                    <td class="text-right">512</td>
                    <td class="text-right pd-r-0-f">10%</td>
                  </tr>
                  <tr>
                    <td class="align-middle pd-l-0-f"><div class="wd-15 ht-15 rounded-circle bd bd-3 bd-purple"></div></td>
                    <td class="tx-medium">Very Poor</td>
                    <td class="text-right">81</td>
                    <td class="text-right pd-r-0-f">4%</td>
                  </tr>
                </tbody>
              </table>
            </div><!-- tab-pane -->
            <div id="rating" class="tab-pane fade">
              <div class="pd-t-10 pd-b-15 d-flex align-items-baseline">
                <h1 class="tx-normal tx-rubik mg-b-0 mg-r-5">4.2</h1>
                <div class="tx-18">
                  <i class="icon ion-md-star lh-0 tx-orange"></i>
                  <i class="icon ion-md-star lh-0 tx-orange"></i>
                  <i class="icon ion-md-star lh-0 tx-orange"></i>
                  <i class="icon ion-md-star lh-0 tx-orange"></i>
                  <i class="icon ion-md-star lh-0 tx-gray-300"></i>
                </div>
              </div>

              <div class="list-group list-group-flush tx-13 mg-b-0">
                <div class="list-group-item pd-y-5 pd-x-0 d-flex align-items-center">
                  <strong class="tx-12 tx-rubik">5.0</strong>
                  <div class="tx-16 mg-l-10">
                    <i class="icon ion-md-star lh-0 tx-orange"></i>
                    <i class="icon ion-md-star lh-0 tx-orange"></i>
                    <i class="icon ion-md-star lh-0 tx-orange"></i>
                    <i class="icon ion-md-star lh-0 tx-orange"></i>
                    <i class="icon ion-md-star lh-0 tx-orange"></i>
                  </div>
                  <div class="mg-l-auto tx-rubik tx-color-02">4,230</div>
                  <div class="mg-l-20 tx-rubik tx-color-03 wd-10p text-right">58%</div>
                </div>
                <div class="list-group-item pd-y-5 pd-x-0 d-flex align-items-center">
                  <strong class="tx-12 tx-rubik">4.0</strong>
                  <div class="tx-16 mg-l-10">
                    <i class="icon ion-md-star lh-0 tx-orange"></i>
                    <i class="icon ion-md-star lh-0 tx-orange"></i>
                    <i class="icon ion-md-star lh-0 tx-orange"></i>
                    <i class="icon ion-md-star lh-0 tx-orange"></i>
                    <i class="icon ion-md-star lh-0 tx-gray-300"></i>
                  </div>
                  <div class="mg-l-auto tx-rubik tx-color-02">1,416</div>
                  <div class="mg-l-20 tx-rubik tx-color-03 wd-10p text-right">24%</div>
                </div>
                <div class="list-group-item pd-y-5 pd-x-0 d-flex align-items-center">
                  <strong class="tx-12 tx-rubik">3.0</strong>
                  <div class="tx-16 mg-l-10">
                    <i class="icon ion-md-star lh-0 tx-orange"></i>
                    <i class="icon ion-md-star lh-0 tx-orange"></i>
                    <i class="icon ion-md-star lh-0 tx-orange"></i>
                    <i class="icon ion-md-star lh-0 tx-gray-300"></i>
                    <i class="icon ion-md-star lh-0 tx-gray-300"></i>
                  </div>
                  <div class="mg-l-auto tx-rubik tx-color-02">980</div>
                  <div class="mg-l-20 tx-rubik tx-color-03 wd-10p text-right">16%</div>
                </div>
                <div class="list-group-item pd-y-5 pd-x-0 d-flex align-items-center">
                  <strong class="tx-12 tx-rubik">2.0</strong>
                  <div class="tx-16 mg-l-10">
                    <i class="icon ion-md-star lh-0 tx-orange"></i>
                    <i class="icon ion-md-star lh-0 tx-orange"></i>
                    <i class="icon ion-md-star lh-0 tx-gray-300"></i>
                    <i class="icon ion-md-star lh-0 tx-gray-300"></i>
                    <i class="icon ion-md-star lh-0 tx-gray-300"></i>
                  </div>
                  <div class="mg-l-auto tx-rubik tx-color-02">401</div>
                  <div class="mg-l-20 tx-rubik tx-color-03 wd-10p text-right">8%</div>
                </div>
                <div class="list-group-item pd-y-5 pd-x-0 d-flex align-items-center bg-transparent">
                  <strong class="tx-12 tx-rubik">1.0</strong>
                  <div class="tx-16 mg-l-10">
                    <i class="icon ion-md-star lh-0 tx-orange"></i>
                    <i class="icon ion-md-star lh-0 tx-gray-300"></i>
                    <i class="icon ion-md-star lh-0 tx-gray-300"></i>
                    <i class="icon ion-md-star lh-0 tx-gray-300"></i>
                    <i class="icon ion-md-star lh-0 tx-gray-300"></i>
                  </div>
                  <div class="mg-l-auto tx-rubik tx-color-02">798</div>
                  <div class="mg-l-20 tx-rubik tx-color-03 wd-10p text-right">12%</div>
                </div>
              </div>
            </div><!-- tab-pane -->
            <div id="activities" class="tab-pane fade">
              <ul class="activity tx-13 mg-b-10">
                <li class="activity-item">
                  <div class="activity-icon bg-primary-light tx-primary">
                    <i data-feather="clock"></i>
                  </div>
                  <div class="activity-body">
                    <p class="mg-b-2"><strong>Louise</strong> added a time entry to the ticket <a href="" class="link-02"><strong>Sales Revenue</strong></a></p>
                    <small class="tx-color-03">2 hours ago</small>
                  </div><!-- activity-body -->
                </li><!-- activity-item -->
                <li class="activity-item">
                  <div class="activity-icon bg-success-light tx-success">
                    <i data-feather="paperclip"></i>
                  </div>
                  <div class="activity-body">
                    <p class="mg-b-2"><strong>Kevin</strong> added new attachment to ticket <a href="" class="link-01"><strong>Software Bug</strong></a></p>
                    <small class="tx-color-03">5 hours ago</small>
                  </div><!-- activity-body -->
                </li><!-- activity-item -->
                <li class="activity-item">
                  <div class="activity-icon bg-warning-light tx-orange">
                    <i data-feather="share"></i>
                  </div>
                  <div class="activity-body">
                    <p class="mg-b-2"><strong>Natalie</strong> reassigned ticket <a href="" class="link-02"><strong>Problem installing software</strong></a></p>
                    <small class="tx-color-03">8 hours ago</small>
                  </div><!-- activity-body -->
                </li><!-- activity-item -->
                <li class="activity-item">
                  <div class="activity-icon bg-pink-light tx-pink">
                    <i data-feather="plus-circle"></i>
                  </div>
                  <div class="activity-body">
                    <p class="mg-b-2"><strong>Katherine</strong> submitted new ticket <a href="" class="link-02"><strong>Payment Method</strong></a></p>
                    <small class="tx-color-03">Yesterday</small>
                  </div><!-- activity-body -->
                </li><!-- activity-item -->
                <li class="activity-item">
                  <div class="activity-icon bg-indigo-light tx-indigo">
                    <i data-feather="settings"></i>
                  </div>
                  <div class="activity-body">
                    <p class="mg-b-2"><strong>Katherine</strong> changed settings to ticket <a href="" class="link-02"><strong>Payment &amp; Invoice</strong></a></p>
                    <small class="tx-color-03">2 days ago</small>
                  </div><!-- activity-body -->
                </li><!-- activity-item -->
              </ul><!-- activity -->
            </div>
          </div><!-- tab-content -->
        </div><!-- modal-body -->
      </div><!-- modal-content -->
    </div><!-- modal-dialog -->
  </div><!-- modal -->

  <div class="modal fade" id="modalUsers" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-body pd-20 pd-sm-30">
          <h4 class="tx-18 tx-sm-20 mg-b-3">People You May Know</h4>
          <p class="mg-b-20 tx-color-03">Users you may add to your connections</p>
          <a href="" role="button" class="close pos-absolute t-15 r-15" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </a>

          <div class="bd">
            <div class="d-flex ht-45 pd-x-15 align-items-center bd-b">
              <input type="search" class="form-control bd-0 pd-0 shadow-none-f" placeholder="Search for users">
              <a href="" role="button" class="link-03"><i data-feather="search" class="wd-20 ht-20 stroke-wd-2-5"></i></a>
            </div>

            <ul class="list-unstyled media-list tx-12 tx-sm-13 mg-b-0">
              <li class="media bg-ui-01 pd-y-10 pd-x-15">
                <div class="avatar"><img src="https://via.placeholder.com/500" class="rounded-circle" alt=""></div>
                <div class="media-body mg-l-15">
                  <h6 class="tx-13 mg-b-2">Josephine Mendez</h6>
                  <span class="d-block tx-color-03">josepne@mendez.com</span>
                </div><!-- media-body -->
                <a href="" class="btn btn-white rounded-circle btn-icon mg-l-15"><i data-feather="plus"></i></a>
              </li><!-- media -->
              <li class="media bg-ui-01 pd-y-10 pd-x-15 mg-t-1">
                <div class="avatar"><img src="https://via.placeholder.com/500" class="rounded-circle" alt=""></div>
                <div class="media-body mg-l-15">
                  <h6 class="tx-13 mg-b-2">Dexter Dela Cruz</h6>
                  <span class="d-block tx-color-03">dexter@delacruz.com</span>
                </div><!-- media-body -->
                <a href="" class="btn btn-white rounded-circle btn-icon mg-l-15"><i data-feather="plus"></i></a>
              </li><!-- media -->
              <li class="media bg-ui-01 pd-y-10 pd-x-15 mg-t-1">
                <div class="avatar"><img src="https://via.placeholder.com/500" class="rounded-circle" alt=""></div>
                <div class="media-body mg-l-15">
                  <h6 class="tx-13 mg-b-2">Abigail Johnson</h6>
                  <span class="d-block tx-color-03">abigaile@johnson.com</span>
                </div><!-- media-body -->
                <a href="" class="btn btn-white rounded-circle btn-icon mg-l-15"><i data-feather="plus"></i></a>
              </li><!-- media -->
              <li class="media bg-ui-01 pd-y-10 pd-x-15 mg-t-1">
                <div class="avatar"><img src="https://via.placeholder.com/500" class="rounded-circle" alt=""></div>
                <div class="media-body mg-l-15">
                  <h6 class="tx-13 mg-b-2">Dyanne Rose Aceron</h6>
                  <span class="d-block tx-color-03">drose@aceron.com</span>
                </div><!-- media-body -->
                <a href="" class="btn btn-white rounded-circle btn-icon mg-l-15"><i data-feather="plus"></i></a>
              </li><!-- media -->
              <li class="media bg-ui-01 pd-y-10 pd-x-15 mg-t-1">
                <div class="avatar"><img src="https://via.placeholder.com/500" class="rounded-circle" alt=""></div>
                <div class="media-body mg-l-15">
                  <h6 class="tx-13 mg-b-2">Annie Christensen</h6>
                  <span class="d-block tx-color-03">annie@christensen.com</span>
                </div><!-- media-body -->
                <a href="" class="btn btn-white rounded-circle btn-icon mg-l-15"><i data-feather="plus"></i></a>
              </li><!-- media -->
            </ul>
          </div>

          <div class="d-flex justify-content-end mg-t-30">
            <button type="button" class="btn btn-white" data-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-primary mg-l-5">Save Changes</button>
          </div>
        </div><!-- modal-body -->
      </div><!-- modal-content -->
    </div><!-- modal-dialog -->
  </div><!-- modal -->

  <div class="modal fade" id="modalBillingInfo" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered wd-sm-650" role="document">
      <div class="modal-content">
        <div class="modal-header pd-y-20 pd-x-20 pd-sm-x-30">
          <a href="" role="button" class="close pos-absolute t-15 r-15" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </a>
          <div class="media align-items-center">
            <span class="tx-color-03 d-none d-sm-block"><i data-feather="credit-card" class="wd-60 ht-60"></i></span>
            <div class="media-body mg-sm-l-20">
              <h4 class="tx-18 tx-sm-20 mg-b-2">Enter Your Billing Info</h4>
              <p class="tx-13 tx-color-03 mg-b-0">Welcome back! Please signin to continue.</p>
            </div>
          </div><!-- media -->
        </div><!-- modal-header -->
        <div class="modal-body pd-sm-t-30 pd-sm-b-40 pd-sm-x-30">


          <div class="form-group">
            <label class="tx-10 tx-uppercase tx-medium tx-spacing-1 mg-b-5 tx-color-03">Card Number</label>
            <input type="text" class="form-control" placeholder="Enter card number">
          </div>

          <div class="form-group">
            <label class="tx-10 tx-uppercase tx-medium tx-spacing-1 mg-b-5 tx-color-03">Name on Card</label>
            <input type="text" class="form-control" placeholder="Enter name on card">
          </div>

          <div class="row row-sm">
            <div class="col-sm">
              <label class="tx-10 tx-uppercase tx-medium tx-spacing-1 mg-b-5 tx-color-03">Expiry Date</label>
              <input type="text" class="form-control" placeholder="Enter expiry date">
            </div><!-- col -->
            <div class="col-sm-5 mg-t-20 mg-sm-t-0">
              <label class="tx-10 tx-uppercase tx-medium tx-spacing-1 mg-b-5 tx-color-03">Secure Code</label>
              <input type="text" class="form-control" placeholder="Enter secure code">
            </div><!-- col -->
          </div>
        </div><!-- modal-body -->
        <div class="modal-footer pd-x-20 pd-y-15">
          <button type="button" class="btn btn-white" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary">Save Info</button>
        </div>
      </div><!-- modal-content -->
    </div><!-- modal-dialog -->
  </div><!-- modal -->

  <div class="modal fade" id="modalSignIn" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered wd-sm-400" role="document">
      <div class="modal-content">
        <div class="modal-body pd-20 pd-sm-40">
          <a href="" role="button" class="close pos-absolute t-15 r-15" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </a>

          <div>
            <h4>Sign In</h4>
            <p class="tx-color-03">Welcome back! Please signin to continue.</p>
            <div class="form-group">
              <label>Email address</label>
              <input type="email" class="form-control" placeholder="yourname@yourmail.com">
            </div>
            <div class="form-group">
              <div class="d-flex justify-content-between mg-b-5">
                <label class="mg-b-0-f">Password</label>
                <a href="" class="tx-13">Forgot password?</a>
              </div>
              <input type="password" class="form-control" placeholder="Enter your password">
            </div>
            <button class="btn btn-primary btn-block">Sign In</button>
            <div class="tx-13 mg-t-20 tx-center">Don't have an account? <a href="page-signup.html">Create an Account</a></div>
          </div>
        </div><!-- modal-body -->
      </div><!-- modal-content -->
    </div><!-- modal-dialog -->
  </div><!-- modal -->

  <div class="modal fade" id="modalSignUp" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered wd-sm-400" role="document">
      <div class="modal-content">
        <div class="modal-body pd-20 pd-sm-40">
          <a href="" role="button" class="close pos-absolute t-15 r-15" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </a>

          <div>
            <h4>Create New Account</h4>
            <p class="tx-color-03">It's free to signup and only takes a minute.</p>
            <div class="form-group">
              <label>Full Name</label>
              <input type="text" class="form-control" placeholder="Full name">
            </div>
            <div class="form-group">
              <label>Email address</label>
              <input type="email" class="form-control" placeholder="yourname@yourmail.com">
            </div>
            <div class="form-group">
              <label class="mg-b-0-f">Password</label>
              <input type="password" class="form-control" placeholder="Enter your password">
            </div>
            <div class="form-group">
              By clicking Create an account below, you agree to our terms of service and privacy statement.
            </div>
            <button class="btn btn-primary btn-block">Create Account</button>
            <div class="tx-13 mg-t-20 tx-center">Already have an account? <a href="page-signup.html">Sign In</a></div>
          </div>
        </div><!-- modal-body -->
      </div><!-- modal-content -->
    </div><!-- modal-dialog -->
  </div><!-- modal -->

  @@include('./_script.html',{})

  <script>
    $(function () {
      'use strict'
    });
  </script>
</body>

</html>